<template>
    <div class="mediaContent">
        <ul>
            <li v-for="(item,index) in result"  @click="redic(index)"  :key="index" :class="{bgWhite:index==liIndex,bgRed:index!=liIndex}">
				<a href="javascript:;" :class="{colorRed:index==liIndex,colorWhite:index!=liIndex}">{{item.media_name}}</a>
			</li>
        </ul>
        <indexSemBaidu v-if="liIndex==0"></indexSemBaidu>
        <indexSem360 v-if="liIndex==1"></indexSem360>
        <indexSemShenMa v-if="liIndex==2"></indexSemShenMa>
        <indexSemSouGou v-if="liIndex==3"></indexSemSouGou>
    </div>
</template>
<script>
// SEM营销组件
import indexSemBaidu from "./indexSemBaidu.vue";
import indexSem360 from "./indexSem360.vue";
import indexSemShenMa from "./indexSemShenMa.vue";
import indexSemSouGou from "./indexSemSouGou.vue";
export default {
  components: {
    indexSemBaidu,
    indexSem360,
    indexSemShenMa,
    indexSemSouGou
  },
  data() {
    return {
      liIndex: 0,
      result: "",
      id: ""
    };
  },
  methods: {
    redic(index) {
      this.liIndex = index;
    }
  },
  mounted() {
    this.$ajax
      .post(this.Ipurl + "advertisingInformation/getNamesByType" + "?type=SEM")
      .then(res => {
        this.result = res.data.dataInfo;
        console.log(this.result);
        // this.id = this.result.id
      });
  }
};
</script>
<style scoped>
.mediaContent {
  width: 1000px;
  float: left;
}
ul {
  overflow: hidden;
}
ul li {
  float: left;
  width: 25%;
  height: 38px;
  text-align: center;
  line-height: 38px;
  background-color: #ee4041;
  border-right: 1px solid #fff;
  cursor: pointer;
}
ul li a {
  font-size: 16px;
}
.colorRed {
  color: #ee4041;
}
.colorWhite {
  color: #fff;
}
.bgWhite {
  background: #fff;
}
.bgRed {
  background: #ee4041;
}
</style>